<template>
  <div class="app-mob-map-position">
    <ion-input :value="data ? data[address] : null" @ionChange="changeAddress"></ion-input>
    <ion-icon name="location" @click="openMap"></ion-icon>
  </div>
</template>
<script lang="ts">
import { Util } from "@/ibiz-core/utils";
import i18n from "@/locale";
import store from "@/store";
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
    components: {
    },
})
export default class AppMobMapPosition extends Vue {

    /**
     * 视图上下文参数
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() context: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() viewparams: any;

    /**
     * 是否回填信息
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop({default: true}) backinfo!: boolean;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() data?: any;

    /**
     * 地址
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() address?: any;

    /**
     * 经度
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() latitude?: any;

    /**
     * 纬度
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */  
    @Prop() longitude?: any;

    /**
     * 地图
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */ 
    public map: any;

    /**
     * 改变地址
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */ 
    public changeAddress($enevt: any) {
      this.$emit('change', {name: this.address, value: $enevt.detail.value});
    }

    /**
     * 打开地图
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */ 
    public openMap() {
      const props = {
        context: Util.deepCopy(this.context),
        viewparams: {
          address: this.data ? this.data[this.address] : null,
          longitude: this.data ? this.data[this.longitude] : null,
          latitude: this.data ? this.data[this.latitude] : null,
        },
        close: (data?: any) => {
          this.closeMap(data);
        }
      }
      let map: any = new Vue({
          store: store,
          i18n: i18n,
          render(h) {
              return h('app-mob-map-page',{
                props
              });
          },
      }).$mount();
      this.map = map;
      document.getElementById('app')?.appendChild(map.$el);
    }

    /**
     * 关闭地图
     *
     * @type {*}
     * @memberof AppMobMapPosition
     */ 
    public closeMap(data: any) {
      document.getElementById('app')?.removeChild(this.map.$el);
      if (data && this.backinfo) {
        if (this.address) {
          this.$emit('change', {name: this.address, value: data.address});
        }
        if (this.latitude) {
          this.$emit('change', {name: this.latitude, value: data.latitude});
        }
        if (this.longitude) {
          this.$emit('change', {name: this.longitude, value: data.longitude});
        }
      }
    }
}
</script>
<style lang="less">
@import "./app-mob-map-position.less";
</style>